<template>
  <div class="lineBicycle" >
    <div id="line12" class="" style="width: 100%;height:100%;"></div>
  </div>

</template>
<script>
  export default {
    props:["perHourData","company"],
    data(){
      return {
        colors:[]
      }
    },
    mounted(){
      document.querySelector(".lineBicycle").style.height=document.querySelector(".reportManageWrap").clientHeight-270+"px"
      this.initData()
    },
    destroyed(){

    },
    created(){

    },
    methods: {

      initData(){

        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();
        }
        let colors=[]
        this.perHourData.forEach(item1=>{
        this.$store.state.companyInfos.forEach(item=>{
            if(item.enterpriseName==item1.name){
              colors.push(item.color)
            }
          })
        })
        this.myChart = this.echarts.init(document.getElementById('line12'))
        var option = {
          color:colors,
          title : {
            text: '各企业违规案件占比',
            subtext: '数量与占比',
            x:'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: 'gray'          // 主标题文字颜色
            },
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
//            bottom: 'bottom',
            x: 'right',
            data: this.company,
            textStyle: {
              fontSize: 12,
              color: 'gray'          // 主标题文字颜色
            },
          },
          series : [
            {
              name: '数量与占比',
              type: 'pie',
              radius : '65%',
              center: ['50%', '60%'],
              data:this.perHourData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        this.myChart.setOption(option);

      }
    },
    watch: {
      perHourData(){
        this.initData()
      },
    }
  }

</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .lineBicycle
    width: 100%
    margin 0 auto
    border-radius 15px
    display: flex
    justify-content: center
    color white !important

</style>
